<template>
  <div>
    <!--  搜索表单  -->
    <div>

      <el-input style="width: 300px;" placeholder="请输入餐厅名11111111111111111111称"></el-input>
      <el-input style="width: 300px;" margin-left="5px" placeholder="请输入餐厅地址"></el-input>
      <el-button type="primary" style="margin-left: 5px;" >查询</el-button>
    </div>
    <el-table :data="tableData" stripe>
      <el-table-column prop="name" label="餐厅名称" width="180"></el-table-column>
      <el-table-column prop="address" label="餐厅地址" width="180"></el-table-column>
      <el-table-column prop="phone" label="餐厅电话" width="180"></el-table-column>
      <el-table-column prop="openinghours" label="营业时间" width="180"></el-table-column>
      <el-table-column prop="rating" label="餐厅评分" width="180"></el-table-column>
      <el-table-column prop="type" label="餐厅类型" width="180"></el-table-column>
    </el-table>

    <div style="margin-left: 2px">
      <el-pagination
          background
          :page-size="10"
          layout="prev, pager, next"
          :total="tableData.length">
      </el-pagination>
    </div>
  </div>
</template>

<script>

export default {
  name: 'HomeView',
  data() {
    return {
      tableData: []
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      fetch('http://localhost:8090/restaurants/selectAllRestaurants')
          .then(response => response.json())
          .then(json => {
            console.log(json)
            this.tableData = json
          })
    }
  }

}
</script>
